<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-table border style="margin-bottom:10px" :data="skuList.records">
      <el-table-column label="序号" align="center" width="90" type="index"></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template #="{row,index}">
          <img :src="row.skuDefaultImg" style="width:100px" />
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="操作" width="250">
        <template #="{row,index}">
          <el-button
            type="danger"
            size="small"
            :icon="Top"
            v-if="row.isSale"
            @click="productManager(row,true)"
          ></el-button>
          <el-button
            type="info"
            size="small"
            :icon="Bottom"
            v-else
            @click="productManager(row,false)"
          ></el-button>
          <el-button type="warning" size="small" :icon="Edit" @click="editSku"></el-button>
          <el-button type="info" size="small" :icon="InfoFilled" @click="infoSku(row)"></el-button>
          <el-popconfirm
            width="220"
            confirm-button-text="确定"
            cancel-button-text="取消"
            confirm-button-type="danger"
            :icon="Delete"
            icon-color="#f00"
            @confirm="delSku(row)"
            :title="`确定删除${row.skuName}?`"
          >
            <template #reference>
              <el-button type="danger" size="small" :icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="current"
      v-model:page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
      @current-change="currentChange"
    />
    <el-drawer
      size="40%"
      v-model="drawerVisiable"
      direction="rtl"
      :with-header="false"
      class="drawer"
    >
      <el-row :gutter="20" class="drawer-row">
        <el-col :span="6" class="col-title">SKU名称</el-col>
        <el-col :span="18">{{ skuInfoData?.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20" class="drawer-row">
        <el-col :span="6" class="col-title">SKU描述</el-col>
        <el-col :span="18">{{ skuInfoData?.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20" class="drawer-row">
        <el-col :span="6" class="col-title">SKU价格</el-col>
        <el-col :span="18">{{ skuInfoData?.price }}</el-col>
      </el-row>
      <el-row :gutter="20" class="drawer-row">
        <el-col :span="6" class="col-title">平台属性</el-col>
        <el-col :span="18">
          <el-tag
            type="success"
            size="small"
            v-for="item in skuInfoData?.skuAttrValueList"
            :key="item.id"
            style="margin:0px 5px 5px 0px"
          >{{ item.attrName }}-{{item.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="drawer-row">
        <el-col :span="6" class="col-title">销售属性</el-col>
        <el-col :span="18">
          <el-tag
            type="success"
            size="small"
            v-for="item in skuInfoData?.skuSaleAttrValueList"
            :key="item.id"
            style="margin:0px 5px 5px 0px"
          >{{ item.saleAttrName }}-{{item.saleAttrValueName }}</el-tag>
        </el-col>
      </el-row>
      <el-carousel trigger="click" height="300px" style="width:300px;margin:auto">
        <el-carousel-item v-for="item in skuInfoData?.skuImageList" :key="item.id">
          <img :src="item.imgUrl" style="width:300px;height:300px" />
        </el-carousel-item>
      </el-carousel>
    </el-drawer>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import skuApi from '@/api/product/sku'
import type { SkuPageModel, SkuModel } from '@/api/product/sku'
import { ElMessage } from 'element-plus'
import { Bottom, Delete, Edit, InfoFilled, Top } from '@element-plus/icons-vue'
const current = ref(1)
const pageSize = ref(10)
const total = ref(1)
const drawerVisiable = ref(false)
const skuList = ref<SkuPageModel>({
  records: [],
  total: 1,
  size: 10,
  current: 1,
  searchCount: true,
  pages: 0,
})
const skuInfoData = ref<SkuModel>()
const getPage = async () => {
  try {
    const result = await skuApi.getPage(current.value, pageSize.value)
    skuList.value = result
    total.value = result.total
  } catch (error) {
    ElMessage({
      type: 'error',
      message: 'sku列表获取失败',
    })
  }
}
const productManager = async (row: SkuModel, isSale: boolean) => {
  try {
    if (isSale) {
      await skuApi.cancelSale(row.id as number)
    } else {
      await skuApi.onSale(row.id as number)
    }
    ElMessage({
      type: 'success',
      message: `${isSale ? '下架' : '上架'}${row.skuName}成功`,
    })
    getPage()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: `${isSale ? '下架' : '上架'}${row.skuName}失败`,
    })
  }
}
const editSku = () => {
  ElMessage({
    message: '该模块正在建设中..',
    type: 'success',
  })
}
const infoSku = async (row: SkuModel) => {
  drawerVisiable.value = true
  skuInfoData.value = await skuApi.getSkuInfo(row.id as number)
}
const delSku =async (row:SkuModel)=>{
  try {
     await skuApi.delete(row.id as number)
     ElMessage({
      type:'success',
      message:`删除${row.skuName}成功！`
     })
     getPage()
  } catch (error) {
    ElMessage({
      type:'error',
      message:`删除${row.skuName}失败!`
     })
  }
    
}
const currentChange = () => {
  getPage()
}
onMounted(() => {
  getPage()
})
</script>

<style scoped>
.col-title {
  font-weight: bold;
}
.drawer-row {
  margin-bottom: 15px;
}
</style>
<!-- <style>
.el-drawer__body {
  padding-left: 20px;
}
.el-carousel__button {
  background: #000 !important;
}
ul.el-carousel__indicators.el-carousel__indicators--horizontal {
  display: flex;
}
</style> -->
<!-- <style scoped>
>>> .el-drawer__body {
  padding-left: 20px;
}
>>> .el-carousel__button {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #000 !important;
}
>>> ul.el-carousel__indicators.el-carousel__indicators--horizontal {
  display: flex;
}
</style> -->
<!-- <style scoped>
/deep/ .el-drawer__body {
  padding-left: 20px;
}
/deep/ .el-carousel__button {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #000 !important;
}
/deep/ ul.el-carousel__indicators.el-carousel__indicators--horizontal {
  display: flex;
}
</style> -->
<style lang="scss" scoped>
::v-deep(.el-drawer__body) {
  padding-left: 20px;
}
::v-deep(.el-carousel__button) {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #000 !important;
}
::v-deep(ul.el-carousel__indicators.el-carousel__indicators--horizontal) {
  display: flex;
}
</style>